<template>
	<Container>
		<view class="header">
			<view hover-class="touch" hover-stay-time="300" :class="{ error: chooses[index] === 'error' }" v-for="(item, index) in assignment.optionArticles" :key="index">
				<image class="image" v-if="!isStart || chooses[index] === 'success'" :src="item.imageUrl" mode="aspectFit"></image>
				<view v-if="isStart && chooses[index] !== 'success'"><image src="../../../static/wenhao2.png" mode="aspectFit"></image></view>
			</view>
			<AudioIcon @iconTap="iconTap" :questionPress="questionPress" />
		</view>
		<view class="options" v-if="isStart">
			<image
				:style="{ transition: transition, transform: 'translate(' + moveX + 'px,' + moveY + 'px)' }"
				@touchstart="start"
				@touchmove="move"
				@touchend="end"
				:src="currentOption.imageUrl"
				mode="aspectFit"
			></image>
		</view>
		<Question :question="questionWord" />
	</Container>
</template>

<script>
import { mixins } from '../../../common/mixins/assignmentDefault.js'
import { guide } from '../../../common/mixins/assignmentGuide.js'
import AudioIcon from '../audioIcon.vue'
import Question from '../questionName.vue'
import Container from '../container.vue'
export default {
	data() {
		return {
			current: 0,
			moveX: 0,
			moveY: 0,
			transition: '',
			isStart: false,
			isSureList: [],
			positionList: [{ left: 51, top: 7.375 }, { left: 411, top: 7.375 }, { left: 51, top: 29.375 }, { left: 411, top: 29.375 }]
		}
	},
	mixins: [mixins, guide],
	components: { AudioIcon, Question, Container },
	created() {
		this.positionList.map(item => {
			item.left = (this.config.screenWidth / 750) * item.left
			item.top = (this.config.screenHeight * item.top) / 100
			return item
		})
	},
	computed: {
		currentOption() {
			return this.assignment.optionArticles.filter(item => {
				return item.serialIndex === this.current
			})[0]
		}
	},
	methods: {
		questionPlay: async function() {
			const data = await this.parseTextAudio({
				text: this.question.questionName,
				speaker: this.assignment.audioSpeaker ? this.assignment.audioSpeaker : null
			})
			this.dialogueAudio({
				src: data,
				start: () => {
					this.questionPress = true
					this.guidePress = false
					this.isStart = false
				},
				end: async () => {
					const guide = await this.parseTextAudio({
						text: this.assignment.guide,
						speaker: this.assignment.audioSpeaker ? this.assignment.audioSpeaker : null
					})
					const timer = setTimeout(() => {
						this.dialogueAudio({
							src: guide,
							start: () => {
								this.guidePress = true
								this.isStart = true
							},
							end: () => {
								this.questionPress = false
							}
						})
					}, 2000)
					this.$once('hook:beforeDestroy', function() {
						clearInterval(timer)
					})
				}
			})
		},
		start: function($event) {
			;[this.X, this.Y, this.transition] = [$event.changedTouches[0].pageX, $event.changedTouches[0].pageY, 'all 0s']
		},
		move: function($event) {
			;[this.moveX, this.moveY] = [$event.changedTouches[0].pageX - this.X, $event.changedTouches[0].pageY - this.Y]
		},
		end: function($event) {
			const [pageX, pageY] = [$event.changedTouches[0].pageX, $event.changedTouches[0].pageY]
			let isSure = ''
			this.positionList.map((item, index) => {
				if (
					pageX > item.left &&
					pageX < item.left + (this.config.screenWidth / 750) * 288 &&
					pageY > item.top &&
					pageY < item.top + (this.config.screenHeight * 15.75) / 100
				) {
					const bool = this.assignment.optionArticles[index].serialIndex === this.currentOption.serialIndex
					const status = bool ? 'success' : 'error'
					this.optionStatus(status, index)
					isSure = status
					return
				}
			})
			if (isSure === 'error') {
				this.$parent.next({
					isSure: false
				})
				;[this.moveX, this.moveY, this.transition] = [0, 0, 'all .5s']
				return
			}
			if (isSure === 'success') {
				if (this.current === this.assignment.optionArticles.length - 1) {
					this.$parent.next({
						isSure: true
					})
					this.isStart = false
				}
				this.touchAudio()
				;[this.moveX, this.moveY, this.transition] = [0, 0, 'all 0s']
				this.current++
			} else {
				;[this.moveX, this.moveY, this.transition] = [0, 0, 'all .5s']
			}
		}
	}
}
</script>

<style scoped lang="stylus">
.header
	height 50vh
	width 720rpx
	border-radius 70rpx
	background white
	border 12rpx solid #FCC77D
	box-sizing border-box
	margin 1.5vh 0 5vh 0
	display flex
	position relative
	align-content center
	justify-content center
	flex-wrap wrap
	view
		width 50%
		height 45%
		display flex
		align-items center
		justify-content center
		.image
			animation outIn 0.5s
			width 85%
			height 80%
		view
			animation outIn 0.5s
			width 80%
			height 70%
			border 10rpx dashed #FFD9A2
			border-radius 50rpx
			box-sizing border-box
			display flex
			align-items center
			justify-content center
			image
				width 70%
				height 70%
.options
	width 16vh
	height 16vh
	display flex
	align-items center
	justify-content center
	margin 7vh auto
	border 10rpx solid #FF9A71
	border-radius 50rpx
	box-sizing border-box
	animation outIn 0.5s
	image
		width 80%
		height 80%
</style>
